<div class="container content">

	<div class="alert alert-danger" ng-if="error">
		<b>Error:</b> {{ error }}
	</div>

	<div class="col-md-6">
	    <table class="table">
	     <thead><tr><th>Application</th><th><small class="pull-right"><a href="api/instance/{{ instance.id }}/info">raw JSON</a></small></th></tr></thead>
	    <tbody>
	      <tr ng-repeat="(key, value) in appInfo">
			  <td>{{ key }}</td><td style="white-space: pre;">{{ value | flatten }}</td>
	      </tr>
	    </tbody>
	   </table>
	</div>

	<div class="col-md-6" ng-if="gitInfo">
		<table class="table">
			<thead><tr><th>Git</th><th><small class="pull-right"><a href="api/instance/{{ instance.id }}/info">raw JSON</a></small></th></tr></thead>
			<tbody>
			<tr ng-repeat="(key, value) in gitInfo" >
				<td>{{ key }}</td><td style="white-space: pre;">{{ value | flatten }}</td>
			</tr>
			</tbody>
		</table>
	</div>

	<div class="col-md-6">
		<table class="table">
			<thead>
				<tr><th>Health Checks</th><th><small class="pull-right"><a href="api/instance/{{ instance.id }}/health">raw JSON</a></small></th></tr>
			</thead>
			<tbody>
				<tr><td colspan="2" ng-init="name= 'Application'" ng-include="'health.html'"></td></tr>
			</tbody>
		</table>
	</div>
	
	
	<div class="col-md-6">
	  <table class="table">
	    <thead><tr><th>Memory</th><th><small class="pull-right"><a href="api/instance/{{ instance.id }}/metrics">raw JSON</a></small></th></tr></thead>
	    <tbody>
	      <tr>
	        <td colspan="2">
	          <span>Total Memory ({{ metrics['mem.used'] / 1024 | number:2 }}M / {{ metrics['mem'] / 1024 | number:2 }}M)</span>
	          <div class="progress" style="margin-bottom: 0px;">
	            <div class="progress-bar" style="width:{{ memPercentage = (metrics['mem.used'] / metrics['mem'] * 100 | number:0) }}%;"
	               ng-class="{'progress-bar-success': memPercentage < 75, 'progress-bar-warning': memPercentage >= 75 && memPercentage < 95, 'progress-bar-danger': memPercentage >= 95}">
	              {{memPercentage}}%
	            </div>
	          </div>
	        </td>
	      </tr>
	      <tr>
	        <td colspan="2">
	          <span>Heap Memory ({{ metrics['heap.used'] / 1024 | number:2 }}M / {{ metrics['heap.committed'] / 1024 | number:2 }}M)</span>
	          <div class="progress" style="margin-bottom: 0px;">
	            <div class="progress-bar" style="width:{{ heapPercentage = (metrics['heap.used'] / metrics['heap.committed'] * 100 | number:0) }}%;"
	               ng-class="{'progress-bar-success': heapPercentage < 75, 'progress-bar-warning': heapPercentage >= 75 && heapPercentage < 95, 'progress-bar-danger': heapPercentage >= 95}">
	              {{heapPercentage}}%
	            </div>
	          </div>
	        </td>
	      </tr>
	      <tr>
	        <td>Initial Heap (-Xms)</td>
	        <td>{{metrics['heap.init'] / 1024 | number:2}}M</td>
	      </tr>
	      <tr>
	        <td>Maximum Heap (-Xmx)</td>
	        <td>{{metrics['heap'] / 1024 | number:2}}M</td>
	      </tr>
	   </table>
	</div>
	
	<div class="col-md-6">
	  <table class="table">
	    <thead><tr><th>JVM</th><th><small class="pull-right"><a href="api/instance/{{ instance.id }}/metrics">raw JSON</a></small></th></tr></thead>
	    <tbody>
	      <tr ng-if="metrics['systemload.average'] != null && metrics['systemload.average'] >= 0.0">
	        <td colspan="2">Systemload (last minute average)
	        	<div class="progress" style="margin-bottom: 0px;">
	            	<div class="progress-bar" style="width:{{ metrics['systemload.averagepercent']| number:0 }}%;"
	               		ng-class="{'progress-bar-success': metrics['systemload.averagepercent'] < 75, 'progress-bar-warning': metrics['systemload.averagepercent'] >= 75 && metrics['systemload.averagepercent'] < 95, 'progress-bar-danger': metrics['systemload.averagepercent'] >= 95}">
	              		{{metrics['systemload.averagepercent'] | number:0}}%
	            	</div>
	          	</div>
	        </td>
	      </tr>
	      <tr>
	        <td>Uptime</td>
	        <td>{{ metrics['uptime'] + ticks | timeInterval }} [d:h:m:s]</td>
	      </tr>
	      <tr>
	        <td>Available Processors</td>
	        <td>{{ metrics['processors'] }}</td>
	      </tr>
	      <tr>
	        <td>Current loaded Classes</td>
	        <td>{{ metrics['classes']}}</td>
	      </tr>
	      <tr>
	        <td> Total loaded Classes</td>
	        <td>{{ metrics['classes.loaded']}}</td>
	      </tr>
	      <tr>
	        <td> Unloaded Classes</td>
	        <td>{{ metrics['classes.unloaded']}}</td>
	      </tr>
	      <tr>
	        <td> Threads</td>
	        <td>{{ metrics['threads'] }} total / {{ metrics['threads.daemon'] }} daemon / {{ metrics['threads.peak'] }} peak </td>
	      </tr>
	    </tbody>
	  </table>
	</div>
	
	<div class="col-md-6">
	  <table class="table">
	    <thead><tr><th>Garbage Collection</th><th><small class="pull-right"><a href="api/instance/{{ instance.id }}/metrics">raw JSON</a></small></th></tr></thead>
	      <tr ng-repeat-start="(name, value) in gcInfos track by name">
	        <td>{{name | capitalize}} GC Count</td>
	        <td>{{value.count}}</td>
	      </tr>
	      <tr ng-repeat-end>
	        <td>{{name | capitalize}} GC Time</td>
	        <td>{{value.time}} ms</td>
	      </tr>
	    </tbody>
	   </table>
	</div>

	<div class="col-md-6" ng-show="metrics['httpsessions.active'] != null">
		<table class="table">
			<thead><tr><th colspan="2">Servlet Container</th></tr></thead>
			<tbody>
			<tr>
				<td>Http sessions</td>
				<td>{{ metrics['httpsessions.active'] }} active / {{ metrics['httpsessions.max'] == -1 ? 'unlimited' : metrics['httpsessions.max'] + ' max' }}</td>
			</tr>
			</tbody>
		</table>
	</div>
	
	<div class="col-md-6" ng-show="hasDatasources">
	  <table class="table">
	    <thead><tr><th colspan="2">Datasources</th></tr></thead>
	      <tr ng-repeat = "(name, value) in datasources track by name">
	         <td colspan="2">
	          <span>{{name | capitalize}} Datasource Connections (active: {{ value.active }})</span>
	          <div class="progress" style="margin-bottom: 0px;">
	            <div class="progress-bar" style="width:{{ value.usage * 100 | number:0 }}%;"
	               ng-class="{'progress-bar-success': value.usage < 0.75, 'progress-bar-warning': value.usage >= 0.75 && value.usage < 0.95, 'progress-bar-danger': value.usage >= 0.95}">
	              {{value.usage * 100 | number}}%
	            </div>
	          </div>
	        </td>
	      </tr>
	    </tbody>
	   </table>
	</div>
	
	<div class="col-md-12">
	  <div class="main-template">
	    <div id="xd-jobs" class="tab-pane active col-md-12">
	      <ul class="nav nav-tabs">
	        <li ui-sref-active="active"><a ui-sref="apps.details.metrics({id: instance.id})">Metrics</a></li>
	        <li ui-sref-active="active"><a ui-sref="apps.details.classpath({id: instance.id})">Classpath</a></li>
	      </ul>
	      <div class="tab-content">
	        <div ui-view></div>
	      </div>
	    </div>
	  </div>
	</div>
</div>


<script type="text/ng-template" id="health.html">
	<dl class="health-status">
		<dt>{{name | capitalize}} <span class="status-{{health.status}} pull-right">{{ health.status }}</span></dt>

		<dd>
			<table style="width:100%;">
				<tr ng-repeat="(key, value) in health" ng-if="isHealthDetail(key, value)" ng-class="{'error': key == 'error'}">
					<td>{{key | capitalize}}</td><td>{{value | joinArray:', '}}</td>
				</tr>
			</table>
		</dd>

		<dd ng-repeat="(name, health) in health" ng-if="isChildHealth(name, health)" >
			<ng-include src="'health.html'" ng-if="name != 'diskSpace' && name != 'configServer'"></ng-include>
			<ng-include src="'health-diskSpace.html'" ng-if="name == 'diskSpace'"></ng-include>
			<ng-include src="'health-configServer.html'" ng-if="name == 'configServer'"></ng-include>
		</dd>
	</dl>
</script>

<script type="text/ng-template" id="health-diskSpace.html">
	<dl class="health-status">
		<dt>{{name | capitalize}} <span class="status-{{health.status}} pull-right">{{ health.status }}</span></dt>
		<dd>
			<table style="width:100%;">
				<tr>
					<td>Free</td><td>{{ health.free | humanBytes }}</td>
				</tr>
				<tr>
					<td>Threshold</td><td>{{ health.threshold | humanBytes }}</td>
				</tr>
			</table>
		</dd>
	</dl>
</script>

<script type="text/ng-template" id="health-configServer.html">
	<dl class="health-status">
		<dt>{{name | capitalize}} <span class="status-{{health.status}} pull-right">{{ health.status }}</span></dt>
		<dd ng-if="repository.error">
			<table style="width:100%;">
				<tr class="error">
					<td>Error</td><td>{{ repository.error }}</td>
				</tr>
			</table>
		</dd>
		<dd>
			<dl ng-repeat="repository in health.repositories" class="health-status">
				<dt>{{repository.name }}</dt>
				<dd>
					<table style="width:100%;">
						<tr>
							<td>Label</td><td>{{ repository.label }}</td>
						</tr>
						<tr>
							<td>Sources</td><td>{{ repository.sources | joinArray:', ' }}</td>
						</tr>
						<tr>
							<td>Profiles</td><td>{{ repository.profiles | joinArray:', ' }}</td>
						</tr>
					</table>
				</dd>
			</dl>
		</dd>
	</dl>
</script>
